<template>
    <basic-layout title="关于" :showAddBtn="false" class="wrapBox">
        <img class="logoBox" :src="imgSrc" />
        
        <div class="noName">{{aboutData.SYS_APP_NAME}}</div>
        <div class="noName">{{aboutData.SYS_APP_VERSION}}</div>
        <div class="introduce">{{aboutData.SYS_APP_DESC}}</div>
        <div class="floorBox">
            <div>
                客服电话: {{aboutData.SYS_SERVICE_TEL}}
            </div>
            <div>
                {{aboutData.SYS_COPYRIGHT}}
            </div>
        </div>
    </basic-layout>
</template>

<script>
    import { getSystemPatamValue } from '@/api/common';
    export default {
        data () {
            return {
                imgSrc: null,     // 图片路径
            };
        },
        created () {
            getSystemPatamValue({'configKey':'SYS_APP_ICON'}).then(res =>{
                this.imgSrc = require("@/assets/images/"+res.data);
            })
        },
        computed: {
            // 获取版本信息
            aboutData () {
                return this.$store.state.versionInfo;
            }
        },
        mounted () {},
        methods: {}
    };
</script>

<style scoped lang="less">
.wrapBox ::v-deep .content{
    background-color: #F4F7FA;
    
    .logoBox {
        display: block;
        width: 60px;
        height: 60px;
        margin: 50px auto 10px;
        border-radius: 10px;
        padding: 5px;
    }
    .noName {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        margin: 10px auto;
    }
    .introduce {
        padding: 12px;
        margin: 20px 12px;
        border-radius: 8px;
        // font-size: 16px;
        font-weight: 400;
        background-color: #fff;
    }
    .floorBox {
        width: 100%;
        position: fixed;
        bottom: 30px;
        text-align: center;
        font-size: 12px;
        color: #969799;
        &>div {
            margin: 5px 0;
        }
    }
}
</style>